﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--========== The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags ==========-->
    <title>Home</title>

    <!--==========Dependency============-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/vendors/owl-carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="/static/vendors/magnific-popup/magnific-popup.css">

    <link rel="stylesheet" href="/static/css/familyKanit.css">
    <link rel="stylesheet" href="/static/css/familyJosefinSans.css">
    <link href='/static/css/familyDosis.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/static/css/familyMuli.css">
    <link href='/static/css/familyRoboto.css' rel='stylesheet' type='text/css'>
    <!--==========Theme Styles==========-->
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/theme/green.css" rel="stylesheet">

    <!--========== HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries ==========-->
    <!--========== WARNING: Respond.js doesn't work if you view the page via file:// ==========-->
    <!--==========[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]==========-->
</head>
<style>
    .artimg{
        width: 360px;

    }
    .articles{
        float: left;
    }
</style>
<body class="home">

<header class="row transparent black header1" data-spy="affix" data-offset-top="0" id="header">
    <div class="container">
        <div class="row top-header">
            <div class="col-sm-4 search-form-col">
                <form action="#" method="get" class="search-form">
                    <div class="input-group">
                        <span class="input-group-addon"><img src="/static/images/search-icon-white.png" alt=""></span>
                        <input type="search" class="form-control" placeholder="search">
                    </div>
                </form>
            </div>
            <div class="col-sm-4 logo-col text-center">
                <a href="index.html"><img src="/static/images/logo-white-green.png" alt=""></a>
            </div>
            <div class="col-sm-4 menu-trigger-col">
                <button class="menu-trigger pull-right">
                    <span class="active-page">home</span>
                    <img src="/static/images/menu-align-white.png" alt="" class="icon-burger">
                    <img src="/static/images/menu-close-white.png" alt="" class="icon-cross">
                </button>
            </div>
        </div>
    </div>
    <div class="row menu-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 menu-col">
                    <div class="row">
                        <ul class="nav column-menu black-bg">
                            <li class="active dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="index.html">Home Option 1</a></li>
                                    <li><a href="index2.html">Home Option 2</a></li>
                                    <li><a href="index3.html">Home Option 3</a></li>
                                    <li><a href="index4.html">Home Option 4</a></li>
                                    <li><a href="index5.html">Home Option 5</a></li>
                                    <li><a href="index6.html">Home Option 6</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="single.html">Blog Single 1</a></li>
                            <li><a href="single2.html">Blog Single 2</a></li>
                        </ul>
                        <ul class="nav column-menu black-bg">
                            <li><a href="single3.html">Blog Single 3</a></li>

                            <li><a href="contact.html">contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4 subscribe-col">
                    <h5 class="widget-title">subscribe to our newsletter.</h5>
                    <form action="#" method="post" class="form-inline subscribe-form">
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Email">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm"><span>send</span></button>
                    </form>
                    <ul class="nav social-nav dark">
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<section class="row featured-post-carousel">
    <div class="item post">
        <img src="/static/images/featured-posts/1.jpg" alt="" class="img-responsive main-bg">
        <div class="post-content">
            <div class="container">
                <h5 class="post-meta"><i>in</i> <a href="#">Author Profile</a> | <a href="#">feb 17, 2016</a></h5>
                <h2 class="post-title"><a href="single.html?postId=6&page=1&limit=5" >Nature, in the broadest sense, is the natural, physical, or
                    material world or universe.哈哈哈哈哈哈哈</a></h2>
                <a href="single.html" class="btn btn-primary"><span>read more</span></a>
            </div>
        </div>
    </div>
    <div class="item post">
        <img src="/static/images/featured-posts/1-1.jpg" alt="" class="img-responsive main-bg">
        <div class="post-content">
            <div class="container">
                <h5 class="post-meta"><i>in</i> <a href="#">Author Profile</a> | <a href="#">feb 17, 2016</a></h5>
                <h2 class="post-title"><a href="single.html">Nature, in the broadest sense, is the natural, physical, or
                    material world or universe.</a></h2>
                <a href="single.html" class="btn btn-primary"><span>read more</span></a>
            </div>
        </div>
    </div>
    <div class="item post">
        <img src="/static/images/featured-posts/1-2.jpg" alt="" class="img-responsive main-bg">
        <div class="post-content">
            <div class="container">
                <h5 class="post-meta"><i>in</i> <a href="#">Author Profile</a> | <a href="#">feb 17, 2016</a></h5>
                <h2 class="post-title"><a href="single.html">Nature, in the broadest sense, is the natural, physical, or
                    material world or universe.</a></h2>
                <a href="single.html" class="btn btn-primary"><span>read more</span></a>
            </div>
        </div>
    </div>
</section>

<section class="row content-wrap">
    <div class="container">

        <div class="row" id="post-masonry" style="position: relative; height: 1700px;">


<!--            &lt;!&ndash;Blog Post&ndash;&gt;-->
<!--            <article class="col-sm-4 post post-masonry post-format-gallery">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="featured-content row">-->
<!--                        <div class="gallery-of-post">-->
<!--                            <div class="item"><img src="/static/images/posts/masonry/3.jpg" alt=""></div>-->
<!--                            <div class="item"><img src="/static/images/posts/masonry/3.jpg" alt=""></div>-->
<!--                            <div class="item"><img src="/static/images/posts/masonry/3.jpg" alt=""></div>-->
<!--                            <div class="item"><img src="/static/images/posts/masonry/3.jpg" alt=""></div>-->
<!--                            <div class="item"><img src="/static/images/posts/masonry/3.jpg" alt=""></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">Mark Sanders</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title"><a href="single.html">Nature, in the broadest sense, is the natural,-->
<!--                            physical, or material world or universe.</a></h3>-->
<!--                        <p>In the broadest sense, is the natural, physical, or material world or universe...</p>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">image</a>, <a href="#">entertainment</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-gray.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--            &lt;!&ndash;Blog Post&ndash;&gt;-->
<!--            <article class="col-sm-4 post post-masonry post-format-text">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">Mark Sanders</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title"><a href="single.html">Nature, in the broadest sense, is the natural,-->
<!--                            physical, or material world or universe.</a></h3>-->
<!--                        <p>In the broadest sense, is the natural, physical, or material world or universe...</p>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">image</a>, <a href="#">entertainment</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-gray.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--            &lt;!&ndash;Blog Post&ndash;&gt;-->
<!--            <article class="col-sm-4 post post-masonry post-format-video">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="featured-content row">-->
<!--                        <a href="single.html">-->
<!--                            <img src="/static/images/posts/masonry/4.jpg" alt="" class="img-responsive">-->
<!--                            <img src="/static/images/play-btn.png" alt="" class="video-mark">-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">Trigger Wu</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title"><a href="single.html">Nature, in the broadest sense, is the natural,-->
<!--                            physical, or material world or universe.</a></h3>-->
<!--                        <p>In the broadest sense, is the natural, physical, or material world or universe...</p>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">image</a>, <a href="#">entertainment</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-gray.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--&lt;!&ndash;            &lt;!&ndash;Twitter Widget&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <aside class="col-sm-4 widget widget-twitter widget-with-posts post">&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="widget-twitter-inner">&ndash;&gt;-->
<!--&lt;!&ndash;                    <h5 class="widget-meta"><i class="fa fa-twitter"></i>Twitter feed</h5>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="row tweet-texts">&ndash;&gt;-->
<!--&lt;!&ndash;                        <p>Check out new post on my blog</p>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="row timepast">1 day ago</div>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </aside>&ndash;&gt;-->
<!--            &lt;!&ndash;Blog Post&ndash;&gt;-->
<!--            <article class="col-sm-4 post post-masonry post-format-quote">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">Mark Sanders</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title">If everybody learns this simple art of loving his work, whatever it is,-->
<!--                            enjoying it without asking for any recognition, we would have more beautiful and celebrating-->
<!--                            world.</h3>-->
<!--                        <h5 class="quote-maker"><a href="#">osho</a></h5>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">quote</a>, <a href="#">life</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-white.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--            &lt;!&ndash;Blog Post&ndash;&gt;-->
<!--            <article class="col-sm-4 post post-masonry post-format-link">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">Mark Sanders</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title"></h3>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">link</a>, <a href="#">product</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-gray.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--            Blog Post-->
<!--            <article class="col-sm-4 post post-masonry post-format-video">-->
<!--                <div class="post-wrapper row">-->
<!--                    <div class="featured-content row">-->
<!--                        <a href="single.html">-->
<!--                            <img src="/static/images/posts/masonry/4.jpg" alt="" class="img-responsive">-->
<!--                            <img src="/static/images/play-btn.png" alt="" class="video-mark">-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="post-excerpt row">-->
<!--                        <h5 class="post-meta">-->
<!--                            <a href="#" class="date">feb 17, 2016</a>-->
<!--                            <span class="post-author"><i>by</i><a href="#">test</a></span>-->
<!--                        </h5>-->
<!--                        <h3 class="post-title"><a href="single.html">test</a></h3>-->
<!--                        <p>test2</p>-->
<!--                        <footer class="row">-->
<!--                            <h5 class="taxonomy"><i>in</i> <a href="#">image</a>, <a href="#">entertainment</a></h5>-->
<!--                            <div class="response-count"><img src="/static/images/comment-icon-gray.png" alt="">5</div>-->
<!--                        </footer>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </article>-->
<!--            &lt;!&ndash;Twitter Widget&ndash;&gt;-->
<!--            <aside class="col-sm-4 widget widget-instagram widget-with-posts post">-->
<!--                <div class="widget-instagram-inner">-->
<!--                    <h5 class="widget-meta"><i class="fa fa-twitter"></i>instagram feed chivalricblog</h5>-->
<!--                    <div id="instafeed"></div>-->
<!--                </div>-->
<!--            </aside>-->
        </div>
    </div>
</section>

<!--Footer-->
<footer class="row" id="footer" >
    <div class="container">
        <div class="row top-footer">
            <div class="widget col-sm-3 widget-about">
                <div class="row m0"><a href="index.html"><img src="/static/images/logo-black-green.png" alt=""></a></div>
            </div>
            <div class="widget col-sm-5 widget-menu">
                <div class="row">
                    <ul class="nav column-menu white-bg">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="single.html">Blog Single 1</a></li>
                        <li><a href="single2.html">Blog Single 2</a></li>
                    </ul>
                    <ul class="nav column-menu white-bg">
                        <li><a href="single3.html">Blog Single 3</a></li>

                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </div>
            </div>

        </div>
<!--        <h5 class="copyright">Copyright &copy; 2017.Company name All rights reserved.More Templates <a-->
<!--                href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a-->
<!--                href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></h5>-->
    </div>
</footer>

<!--========== jQuery (necessary for Bootstrap's JavaScript plugins) ==========-->
<script type="text/javascript" src="/static/js/jquery2.2.4.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="/static/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="/static/vendors/instafeed/instafeed.min.js"></script>
<script src="/static/vendors/imagesLoaded/imagesloaded.pkgd.min.js"></script>
<script src="/static/vendors/isotope/isotope.pkgd.min.js"></script>
<script src="/static/js/theme.js"></script>
<script src="/static/js/blog/frontIndex.js"></script>
</body>
</html>
